<div data-role="view" data-title="Maybanhang.Net" id="product-detail" data-layout="mobile-view"  data-reload="true"
data-show="load" > 
	<script type="text/javascript">
		
		function load(e) {
		app.showLoading();	
		var id = e.view.params.id;		
		if (!id) return;
		$.ajax({
		  type: "GET",
		  url: "service/customer/" + id,		 
		  dataType : 'json', 
		  async: true,
		}).done(function( data ) {	
			app.hideLoading();		
			  $('#customerCode').html(data.customerCode);
			  $('#customerFullName').html(data.customerFullName);
			  $('#categoryName').html(data.categoryName);
			  $('#phone').html(data.phone);
			  $('#mobile').html(data.mobile);
			  $('#email').html(data.email);
			  $('#address').html(data.address);
			  $('#description').html(data.description);		
			  $('#customerImage').attr('src','site/customerImage/' + data.customerId);	
			  $('#button_edit_customer').attr('href','site/customerEdit?id=' + data.customerId);	  
			  $('#customer_detail_loading').hide();	
		});	
		
	}
</script>
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href='#index'>Home</a>            
        </div>
    </header>    
    <div id="customer_detail_loading" class="div-progress"></div>
    <img id='customerImage' style="margin-left: auto; margin-right: auto;display: block;height: 200px;width: 200px;"></img>
    <form>
	    <ul data-role="listview" data-style="inset">
	    	<li>
	    		<table><tr><td class="common-detail-label">Mã</td><td class="common-detail-value"><span id='customerCode'></span></td></tr></table>    				
	    	</li>
	    	<li>
	    		<table><tr><td class="common-detail-label">Tên</td><td class="common-detail-value"><span id='customerFullName'></span></td></tr></table>
	    	</li>
	    	<li>
	    		<table><tr><td class="common-detail-label">Nhóm</td><td class="common-detail-value"><span id='categoryName'></span></td></tr></table>
	    	</li>
	    	<li>
	    		<table><tr><td class="common-detail-label">Điện thoại</td><td class="common-detail-value"><span id='phone'></span></td></tr></table>
	    	</li>
	    	<li>
	    		<table><tr><td class="common-detail-label">Mobile</td><td class="common-detail-value"><span id='mobile'></span></td></tr></table>
	    	</li>
	    	<li>
	    		<table><tr><td class="common-detail-label">Email</td><td class="common-detail-value"><span id='email'></span></td></tr></table>
	    	</li>
	    	<li>
	    		<table><tr><td class="common-detail-label">Địa chỉ</td><td class="common-detail-value"><span id='address'></span></td></tr></table>
	    	</li>
	    	<li>
	    		<table><tr><td class="common-detail-label">Mô tả</td><td class="common-detail-value"><span id='description'></span></td></tr></table>
	    	</li>    	
	    </ul>
	    
	    
	    <a class="button" id="button_edit_customer" data-role="button" style="display: block; margin: 2em; text-align: center;" >Sửa</a>
	</form>    
</div>